<div class="bjui-pageContent">
    <div class="pageFormContent" data-layout-h="0">
        <div class="bjui-doc">
            <h3 class="page-header">右键菜单</h3>
            <blockquote>
                <p>本节主要介绍框架的自定义右键菜单。</p>
            </blockquote>
            <h4>初始化</h4>
            <ul>
                <li>jQuery API：<code>右键菜单仅支持jQuery API初始化</code>
                    <pre class="brush: js">
                        $(selector).contextmenu('show', options)
                    </pre>
                </li>
            </ul>
            <span class="label label-default">示例：</span>　<button type="button" class="btn-blue" id="doc-contextmenu-example">请用鼠标右键点我</button> <code>请在控制台看点击菜单后的输出效果！</code><br>
            <script type="text/javascript">
                $('#doc-contextmenu-example').contextmenu('show', 
                    {
                        items:[
                           {
                               title : '菜单一',
                               func  : function(parent, menu) {
                                   console.log(parent)
                                   console.log('第一个菜单！')
                               }
                           },
                           {
                               title : '菜单二',
                               func  : function(parent, menu) {
                                   console.log(menu)
                                   console.log('第二个菜单！')
                               }
                           },
                           {
                               title : 'diver'
                           },
                           {
                               title : '无执行方法的菜单'
                           },
                           {
                               title : '其他菜单',
                               func  : function(parent, menu) {
                                   console.log('其他菜单！')
                               }
                           }
                       ]
                    }
                )
            </script>
            <p>示例代码：</p>
            <pre class="brush: js; html-script: true">
                &lt;button type="button" class="btn-blue" id="doc-contextmenu-example">请用鼠标右键点我&lt;/button>
                &lt;script type="text/javascript">
                    $('#doc-contextmenu-example').contextmenu('show', 
                        {
                            items:[
                               {
                                   title : '菜单一',
                                   func  : function(parent, menu) {
                                       console.log(parent)
                                       console.log('第一个菜单！');
                                   }
                               },
                               {
                                   title : '菜单二',
                                   func  : function(parent, menu) {
                                       console.log(menu)
                                       console.log('第二个菜单！');
                                   }
                               },
                               {
                                   title : 'diver'
                               },
                               {
                                   title : '无执行方法的菜单'
                               },
                               {
                                   title : '其他菜单',
                                   func  : function(parent, menu) {
                                       console.log('其他菜单！')
                                   }
                               }
                           ]
                        }
                    )
                &lt;/script>
            </pre>
            <h4>参数（options）</h4>
            <table class="table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>类型</th>
                        <th>默认值</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>items</td>
                        <td>array[object(title, func)]</td>
                        <td>null</td>
                        <td>[必选] 右键菜单名称及对应方法的数组，object的参数见下面两行。</td>
                    </tr>
                    <tr>
                        <td>└ items - title</td>
                        <td>string</td>
                        <td>null</td>
                        <td>[必选] 右键菜单的名称，<code>当title="diver"时，将生成一条分隔线</code>。</td>
                    </tr>
                    <tr>
                        <td>└ items - func</td>
                        <td>function(parent, menu)</td>
                        <td>null</td>
                        <td>[可选] 点击右键菜单时执行的方法，parent = 弹出右键菜单的jQuery对象，menu = 被点击菜单的jQuery对象。</td>
                    </tr>
                    <tr>
                        <td>shadow</td>
                        <td>boolean</td>
                        <td>true</td>
                        <td>[可选] 是否显示右键菜单的阴影效果。</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="bjui-footBar">
        <ul>
            <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
        </ul>
    </div>
</div>